<script setup lang="ts">
import { ref } from 'vue'
import { User, Lock, Message } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { resetPassword, sendCode } from '@/api/user'

const router = useRouter()
const phone = ref('')
const newPassword = ref('')
const code = ref('')
const countdown = ref(0)
const loading = ref(false)

// 发送验证码
const handleSendCode = async () => {
  if (!phone.value) {
    ElMessage.warning('请输入手机号')
    return
  }
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    ElMessage.warning('请输入正确的手机号')
    return
  }
  try {
    loading.value = true
    await sendCode(phone.value)
    ElMessage.success('验证码发送成功')
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '发送失败')
  } finally {
    loading.value = false
  }
}

// 重置密码
const handleResetPassword = async () => {
  if (!phone.value) {
    ElMessage.warning('请输入手机号')
    return
  }
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    ElMessage.warning('请输入正确的手机号')
    return
  }
  if (!newPassword.value) {
    ElMessage.warning('请输入新密码')
    return
  }
  if (newPassword.value.length < 4) {
    ElMessage.warning('密码长度不能少于4位')
    return
  }
  if (!code.value) {
    ElMessage.warning('请输入验证码')
    return
  }

  try {
    loading.value = true
    await resetPassword({
      phone: phone.value,
      newPassword: newPassword.value,
      code: code.value
    })
    ElMessage.success('密码重置成功')
    router.push('/login')
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '重置密码失败')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="reset-password-container">
    <div class="reset-password-box">
      <h2>重置密码</h2>
      <el-form>
        <el-form-item>
          <el-input
            v-model="phone"
            placeholder="请输入手机号"
            :prefix-icon="User"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="newPassword"
            type="password"
            placeholder="请输入新密码"
            :prefix-icon="Lock"
            show-password
          />
        </el-form-item>

        <el-form-item>
          <div class="code-input">
            <el-input
              v-model="code"
              placeholder="请输入验证码"
              :prefix-icon="Message"
            />
            <el-button
              type="primary"
              :disabled="countdown > 0"
              @click="handleSendCode"
            >
              {{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
            </el-button>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="reset-password-button"
            :loading="loading"
            @click="handleResetPassword"
          >
            重置密码
          </el-button>
        </el-form-item>

        <div class="reset-password-options">
          <span>记起密码了？</span>
          <el-link type="primary" @click="router.push('/login')">去登录</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.reset-password-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.reset-password-box {
  width: 400px;
  padding: 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.reset-password-box h2 {
  text-align: center;
  color: #c0392b;
  margin-bottom: 30px;
}

.code-input {
  display: flex;
  gap: 10px;
}

.code-input .el-button {
  width: 120px;
  background-color: #c0392b;
  border-color: #c0392b;
}

.reset-password-button {
  width: 100%;
  background-color: #c0392b;
  border-color: #c0392b;
}

.reset-password-options {
  text-align: center;
  margin-top: 20px;
}

:deep(.el-input__wrapper) {
  background-color: #f8f8f8;
}

:deep(.el-button--primary:not(:disabled)) {
  background-color: #c0392b;
  border-color: #c0392b;
}

:deep(.el-button--primary:not(:disabled):hover) {
  background-color: #d14738;
  border-color: #d14738;
}

:deep(.el-link.el-link--primary) {
  color: #c0392b;
}

:deep(.el-link.el-link--primary:hover) {
  color: #d14738;
}
</style>
